<template>
  <BasicDrawer
    :destroyOnClose="true"
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="title"
    width="640px"
    @ok="onSave"
    okText="保存"
    :maskClosable="false"
  >
    <div class="card">
      <div class="c-head">
        <a-flex gap="large" align="center">
          <div class="img-container">
            <a-image
              :width="136"
              :height="136"
              :src="OSS_IMG_URL(recordRef.goodsImage)"
              :fallback="imgErrSrc"
            />
          </div>

          <a-flex class="right" vertical gap="middle">
            <div class="cn-medium title">{{ recordRef.goodsName }}</div>
            <div class="price"
              ><span class="d-regular value">{{ recordRef.salePrice }}</span
              ><span class="unit">元</span></div
            >
            <div class="fill"></div>
            <div class="desc" v-if="cateType === 'P'"> 规格：{{ recordRef.specs }}</div>
            <div class="desc" v-else-if="cateType === 'S'">
              服务时长：{{ recordRef.duration }}分钟
            </div>
          </a-flex>
        </a-flex>
      </div>

      <div class="c-title"> 其他信息</div>
      <BasicForm @register="registerForm1" class="form" />
    </div>
  </BasicDrawer>
</template>
<script>
  import { defineComponent, reactive, ref, toRefs } from 'vue';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  import { getLabel, imgErrSrc, proCategoryType, proStatus, OSS_IMG_URL } from '@/api/ds';
  import { POST } from '@/api/http';
  import { useMessage } from '@/hooks/web/useMessage';
  import { defaultUnit } from '../list/util';

  export default defineComponent({
    components: { BasicDrawer, BasicForm },
    emits: ['complete'],
    setup(_, { emit }) {
      const { createMessage } = useMessage();
      const state = reactive({ title: '', cateType: null, imgErrSrc });
      const recordRef = ref({});

      const [registerForm1, form1] = useForm({
        labelWidth: 100,
        // labelAlign: 'left',
        baseColProps: { span: 24, style: { paddingRight: '36px' } },

        schemas: [
          {
            label: '售卖价格',
            field: 'price',
            required: true,
            component: 'InputNumber',
            componentProps: {
              min: 0,
              max: 9999999,
              precision: 2,
              addonAfter: '元',
            },
          },

          {
            label: '商品状态',
            field: 'status',
            required: true,
            component: 'RadioGroup',
            componentProps: {
              options: proStatus,
            },
          },

          {
            label: '安全存量',
            field: 'safeStockOrCsmInterval',
            required: false,
            component: 'Input',
            ifShow: () => state.cateType === 'P',
            componentProps: () => {
              return {
                min: 0,
                max: 9999999,
                precision: 0,
                addonAfter: recordRef.value.saleUnit || defaultUnit,
              };
            },
          },

          {
            label: '回购提醒',
            field: 'alertStockOrVisitBack',
            required: false,
            component: 'Input',
            ifShow: () => state.cateType === 'P',
            componentProps: {
              min: 0,
              max: 9999999,
              precision: 0,
              addonAfter: '天',
            },
          },

          {
            label: '消费间隔体现',
            field: 'safeStockOrCsmInterval',
            required: false,
            component: 'Input',
            ifShow: () => state.cateType === 'S',
            componentProps: {
              min: 0,
              max: 9999999,
              precision: 0,
              addonAfter: '天',
            },
          },

          {
            label: '回访间隔提醒',
            field: 'alertStockOrVisitBack',
            required: false,
            component: 'Input',
            ifShow: () => state.cateType === 'S',
            componentProps: {
              min: 0,
              max: 9999999,
              precision: 0,
              addonAfter: '天',
            },
          },
        ],
        showActionButtonGroup: false,
      });

      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
        async ({ cateType, record }) => {
          state.title = '选用' + getLabel(proCategoryType, cateType);

          state.cateType = cateType;
          recordRef.value = record;

          await init();
        },
      );

      async function init() {
        await form1.resetFields();

        const { salePrice } = recordRef.value;
        const initData = { status: 1, price: salePrice };

        form1.setFieldsValue(initData);
      }

      async function onSave() {
        await form1.validate();
        const formData = form1.getFieldsValue();

        const { cateType } = state;
        const { id: goodsId, goodsSn } = recordRef.value;
        const data = { ...formData, type: cateType, goodsId, goodsSn };

        try {
          setDrawerProps({ confirmLoading: true });

          await POST('/product/singleSelect', data);

          closeDrawer();
          createMessage.success(getLabel(proCategoryType, cateType) + '已选用');
          emit('complete');
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
      }

      return {
        ...toRefs(state),
        recordRef,
        registerDrawer,
        registerForm1,
        onSave,
        OSS_IMG_URL,
      };
    },
  });
</script>

<style lang="less" scoped>
  .card {
    margin: 8px 0 46px;
    padding: 12px;

    .c-head {
      margin-bottom: 32px;

      .img-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 160px;
        border-radius: 10px;
        background-color: #f5f7fa;
      }

      .right {
        .title {
          color: #091f3d;
          font-size: 18px;
        }

        .price {
          color: @primary-color;

          .value {
            font-size: 18px;
            letter-spacing: 1px;
          }

          .unit {
            padding-left: 2px;
            font-size: 10px;
          }
        }

        .desc {
          color: #acb4bf;
          font-size: 12px;
        }
      }
    }

    .c-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 8px;
      color: #091f3d;
      font-size: 15px;
      font-weight: 600;
    }

    .form {
      width: 72%;
      padding: 24px 12px 0 0;
    }
  }
</style>
